<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

	<!-- 导入css样式 -->
	<link href="../../lib/css/bootstrap.min.css" rel="stylesheet" />
	
	<!-- 导入jQuery库 -->
	<script type="text/javascript" src="../../lib/jquery/jquery-1.11.3.min.js" ></script>
	
	<!-- 导入js库 -->
	<script type="text/javascript" src="../../lib/js/bootstrap.min.js" ></script>

	<!-- 导入校验的js -->
	<script type="text/javascript" src="../../lib/jquery-validate/jquery.validate.min.js" ></script>
	<script type="text/javascript" src="../../lib/jquery-validate/messages_zh.js" ></script>

<script>

//表单提交的监控器
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});


$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
//对指定 ID 的表单进行校验
/**
 *	required: true 值是必须的。
	required: "#aa:checked" 表达式的值为真，则需要验证。
	required: function(){} 返回为真，表示需要验证。
	后边两种常用于，表单中需要同时填或不填的元素。 
 */
  $("#signupForm").validate({
	    //校验规则,是一个json对象
	    rules: {
	    	remote: {
			    url: "check-email.php",     //后台处理程序
			    type: "post",               //数据发送方式
			    dataType: "json",           //接受数据格式   
			    data: {                     //要传递的数据
			        username: function() {
			            return $("#username").val();
			        }
			    }
		    },
	      firstname: "required",//使用的是表单的 name 属性名不是 id
	      lastname: "required",
	      username: {
	        required: true,	//必须
	        minlength: 2,	//最小长度
	        success: "valid"
	      },
	      password: {
	        required: true,
	        minlength: 5
	      },
	      confirm_password: {
	        required: true,
	        minlength: 5,
	        equalTo: "#password"	//必须和指定ID的字段值相同
	      },
	      email: {
	        required: true,
	        email: true		//邮箱校验专用
	      },
	      "topic[]": {//校验 checkbox 
	        required: "#newsletter:checked",
	        minlength: 2
	      },
	      agree: "required"
	    },
	    messages: {
	      firstname: "请输入您的名字",
	      lastname: "请输入您的姓氏",
	      username: {
	        required: "请输入用户名",
	        minlength: "用户名必需由两个字母组成"
	      },
	      password: {
	        required: "请输入密码",
	        minlength: "密码长度不能小于 5 个字母"
	      },
	      confirm_password: {
	        required: "请输入密码",
	        minlength: "密码长度不能小于 5 个字母",
	        equalTo: "两次密码输入不一致"
	      },
	      email: "请输入一个正确的邮箱",
	      agree: "请接受我们的声明",
	      topic: "请选择两个主题"
	    }
	});
});
</script>
<style>
.error{
	color:red;
}
</style>
</head>
<body>

<h2>默认校验规则</h2>
<table class="table table-bordered">
<tbody><tr>
	<th width="10%">序号</th>
	<th width="30%">规则</th>
    <th width="60%">描述</th>
</tr>
<tr>
	<td>1</td>
    <td>required:true</td>
	<td>必须输入的字段。</td>
</tr>
<tr>
	<td>2</td>
    <td>remote:"check.php"</td>
	<td>使用 ajax 方法调用 check.php 验证输入值。</td>
</tr>
<tr>
	<td>3</td>
    <td>email:true</td>
	<td>必须输入正确格式的电子邮件。</td>
</tr>
<tr>
	<td>4</td>
    <td>url:true</td>
	<td>必须输入正确格式的网址。</td>
</tr>
<tr>
	<td>5</td>
    <td>date:true</td>
	<td>必须输入正确格式的日期。日期校验 ie6 出错，慎用。</td>
</tr>
<tr>
	<td>6</td>
    <td>dateISO:true</td>
	<td>必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。</td>
</tr>
<tr>
	<td>7</td>
    <td>number:true</td>
	<td>必须输入合法的数字（负数，小数）。</td>
</tr>
<tr>
	<td>8</td>
    <td>digits:true</td>
	<td>必须输入整数。</td>
</tr>
<tr>
	<td>9</td>
    <td>creditcard:</td>
	<td>必须输入合法的信用卡号。</td>
</tr>
<tr>
	<td>10</td>
    <td>equalTo:"#field"</td>
	<td>输入值必须和 #field 相同。</td>
</tr>
<tr>
	<td>11</td>
    <td>accept:</td>
	<td>输入拥有合法后缀名的字符串（上传文件的后缀）。</td>
</tr>
<tr>
	<td>12</td>
    <td>maxlength:5</td>
	<td>输入长度最多是 5 的字符串（汉字算一个字符）。</td>
</tr>
<tr>
	<td>13</td>
    <td>minlength:10</td>
	<td>输入长度最小是 10 的字符串（汉字算一个字符）。</td>
</tr>
<tr>
	<td>14</td>
    <td>rangelength:[5,10]</td>
	<td>输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。</td>
</tr>
<tr>
	<td>15</td>
    <td>range:[5,10]</td>
	<td>输入值必须介于 5 和 10 之间。</td>
</tr>
<tr>
	<td>16</td>
    <td>max:5</td>
	<td>输入值不能大于 5。</td>
</tr>
<tr>
	<td>17</td>
    <td>min:10</td>
	<td>输入值不能小于 10。</td>
</tr>
</tbody></table>	
	
<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester
      </label>
      <label for="topic" class="error" style="display:none">至少选择两个</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form> 
  
<h1>用其他方式替代默认的 SUBMIT</h1>
<pre>
	$().ready(function() {
		$("#signupForm").validate({
		    submitHandler:function(form){
		        alert("提交事件!");   
		        form.submit();
		    }    
		});
	});
</pre>
<h2>使用 ajax 方式</h2>
<pre>
 $(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 }) 

</pre>

<h2>可以设置 validate 的默认值</h2>
<p>如果想提交表单, 需要使用 form.submit()，而不要使用 $(form).submit()。</p>
<pre>
$.validator.setDefaults({
  submitHandler: function(form) { alert("提交事件!");form.submit(); }
});
</pre>


<h1>2、debug，只验证不提交表单</h1>
<p>如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。</p>
<pre>
$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});
</pre>
<p>如果一个页面中有多个表单都想设置成为 debug，则使用：</p>
<pre>
$.validator.setDefaults({
   debug: true
})
</pre>

<h1>3、ignore：忽略某些元素不验证</h1>
<pre>ignore: ".ignore"</pre>
<h1>4、更改错误信息显示的位置</h1>
<p>指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面。</p>
<pre>
errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}
</pre>

<h3>改变错误提示信息位置例子:</h3>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});

$().ready(function() {
	// 提交时验证表单
	var validator = $("#form1").validate({
		errorPlacement: function(error, element) {
			// Append error within linked label
			$( element )
				.closest( "form" )
					.find( "label[for='" + element.attr( "id" ) + "']" )
						.append( error );
		},
		errorElement: "span",
		messages: {
			user: {
				required: " (必需字段)",
				minlength: " (不能少于 3 个字母)"
			},
			password: {
				required: " (必需字段)",
				minlength: " (字母不能少于 5 个且不能大于 12 个)",
				maxlength: " (字母不能少于 5 个且不能大于 12 个)"
			}
		}
	});

	$(".cancel").click(function() {
		validator.resetForm();
	});
});
</script>
<style>
.error{
	color:red;
}
</style>
</head>
<body>
<form method="get" class="cmxform" id="form1" action="">
  <fieldset>
    <legend>登录框</legend>
    <p>
      <label for="user">用户名</label>
      <input id="user" name="user" required minlength="3">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" type="password" maxlength="12" name="password" required minlength="5">
    </p>
    <p>
      <input class="submit" type="submit" value="Login">
    </p>
  </fieldset>
</form>

<p>代码的作用是：一般情况下把错误信息显示在 &lt;td class="status"&gt;&lt;/td&gt; 中，如果是 radio 则显示在 &lt;td&gt;&lt;/td&gt; 中，如果是 checkbox 则显示在内容的后面。</p>
<table class="table table-bordered">
<tbody><tr>
	<th width="15%">参数</th>
	<th width="15%">类型</th>
    <th width="60%">描述</th>
	<th width="10%">默认值</th>
</tr>
<tr>
	<td>errorClass</td>
    <td>String</td>
	<td>指定错误提示的 css 类名，可以自定义错误提示的样式。</td>
    <td>"error"</td>
</tr>
<tr>
	<td>errorElement</td>
    <td>String</td>
	<td>用什么标签标记错误，默认是 label，可以改成 em。</td>
    <td>"label"</td>
</tr>
<tr>
	<td>errorContainer</td>
    <td>Selector</td>
	<td>显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大。<br>errorContainer: "#messageBox1, #messageBox2"</td>
    <td></td>
</tr>
<tr>
	<td>errorLabelContainer</td>
    <td>Selector</td>
	<td>把错误信息统一放在一个容器里面。</td>
    <td></td>
</tr>
<tr>
	<td>wrapper</td>
    <td>String</td>
	<td>用什么标签再把上边的 errorELement 包起来。</td>
    <td></td>
</tr>
</tbody></table>	
<p>一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能，并且没有信息时自动隐藏。</p>
<pre>
errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"	
</pre>

<h1>5、更改错误信息显示的样式</h1>
<p>设置错误提示的样式，可以增加图标显示，在该系统中已经建立了一个 validation.css，专门用于维护校验文件的样式。</p>
<pre>
input.error { border: 1px solid red; }
label.error {
  background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

  padding-left: 16px;

  padding-bottom: 2px;

  font-weight: bold;

  color: #EA5200;
}
label.checked {
  background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

</pre>


<h1>6-远程校验&amp;自定义校验</h1>
<form id="testForm"  name="testForm" action="#" method="post">
	<label for="idCard"> 身份证 </label><br/>
	<input type="text" name="idCard" id="idCard" /><br/>
	
	<label for="phone"> 手机号 </label><br/>
	<input type="text" name="phone" id="phone" /><br/>
	
	<label for="hobby"> 爱好  </label><br/>
	<input type="checkbox" name="hobby" value="电影"/>
	<input type="checkbox" name="hobby" value="运动"/>
	<input type="checkbox" name="hobby" value="跑步"/><br/>
	
	<input type="submit"  value="提交" />
	<input type="reset"  value="重置" />
	
</form>
<script>
$(function(){
	//添加校验
	$("#testForm").validate({
		submitHandler: function(form) {
	        alert(" testForm 提交事件!");
	    	return false;
//	    	form.submit();//提交表单
	    },
		onsubmit:true,// 是否在提交是验证
		onfocusout:true,// 是否在失去焦点时验证
		onkeyup :true,// 是否在敲击键盘时验证
		focusCleanup:true,//未通过校验的表单获得焦点的时候,移除错误提示
		errorPlacement: function(error, element) {
			// Append error within linked label
			$( element )
				.closest( "form" )
					.find( "label[for='" + element.attr( "name" ) + "']" )
						.append( error );
		},
	    rules:{
	    	idCard:{
	    		required:true,//必须
	    		maxlength:5//最大5个长度
	    	},
	    	phone:{
	    		required:true,//必须
	    	},
	    	hobby:{
	    		required:true,
	    		minlength: 2
	    	}
	    },
	    messages:{
	    	idCard:{
	    		required:"必须输入!",//必须
	    		maxlength:"最大不能超过5个字符!"//最大5个长度
	    	},
	    	phone:{
	    		required:"必须输入!",//必须
	    	},
	    	hobby:{
	    		required:"必须输入!",
	    		minlength:"最少输入两个!"
	    	}
	    }
	});
});	
</script>

</body>
</html>
